<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'姓名修改'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <view class="userItem">
      <input type="text" maxlength="15" v-model="edituserInfo.nickName" />
      <view class="editData">
        <view class="mr">{{ edituserInfo.nickName.length }}/15</view>
        <view class="iconfont icon-closel"></view>
      </view>
    </view>
    <button type="parmay" @click="bindUpload">保存</button>
  </view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="修改成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { inject, reactive, toRefs, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const $url = inject("$url");
let data = reactive({
  userInfo: {},
  edituserInfo: {
    ID: "",
    nickName: "",
    email: "",
    phone: "", //联系电话
    headerImg: "", //用户头像
  },
});
let success = ref();
let { edituserInfo } = toRefs(data);
onLoad(() => {
  upDataUserInfo();
});

// 收集数据
const bindUpload = () => {
  if(data.edituserInfo.nickName.length<1) return
  editUserData();
};
// 提交更改信息
const editUserData = () => {
  uni.request({
    url: $url + `/user/setUserInfo`,
    method: "PUT",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    data: data.edituserInfo,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open();
      getUserInfo();
    },
  });
};
// 获取用户信息
const getUserInfo = () => {
  uni.request({
    url: $url + `/user/getUserInfo`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.userInfo.token = data.userInfo.token;
      uni.setStorage({
        key: "useInfo",
        data: res.data.data.userInfo,
        success: function () {
          upDataUserInfo();
        },
      });
    },
  });
};
// 更新展示用户信息
const upDataUserInfo = () => {
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token.length < 1) {
        // uni.navigateTo({
        //   url: "/pages/login/login?type=1",
        // });
      }
      data.userInfo = res.data;
      data.edituserInfo.ID = res.data.ID;
      data.edituserInfo.nickName = res.data.nickName;
      data.edituserInfo.email = res.data.email;
      data.edituserInfo.phone = res.data.phone;
      data.edituserInfo.headerImg = res.data.headerImg;
    },
  });
};
</script>

<style scoped>
.content {
  padding: 0 28rpx;
  padding-bottom: 55rpx;
}
.userItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f7f7f7;
}
.editTitle {
  flex: none;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editData {
  display: flex;
  align-items: center;
}
.editData view {
  height: 72rpx;
  line-height: 72rpx;
}
.editData image {
  margin-right: 27rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}
.mr {
  margin-right: 18rpx;
  margin-left: 18rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.userItem {
  font-size: 29rpx;
  font-weight: 400;
  color: #666666;
}
.userItem input {
  flex: 1 1;
}
.content button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  margin-left: 0;
  width: 120rpx;
  height: 54rpx;
  background: #1677ff;
  border-radius: 27rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
}
</style>
